<template>
    <div class="mobile-container">
        <div class="content rich-content" v-html="detailsData.content"></div>
    </div>
</template>


<script setup>
import '@/styles/rice.css'
import { nextTick, reactive, ref, useTemplateRef } from 'vue'
import { useUrlSearchParams } from '@vueuse/core'
import articleApi from 'api/model/article.js'

const params = useUrlSearchParams('hash')
const id = params.id

// 获取文章详情
const detailsData = reactive({
    title: '',
    content: ''
})

async function getArticleDetails () {
    const { code, data = [] } = await articleApi.details.get({
        id: id
    })
    if (code === 200) {
        const { title, content } = data || {}
        detailsData.title = title
        detailsData.content = content
    }
}

getArticleDetails()


</script>

<style lang="less" scoped>
.mobile-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    background: #fff;
    // 隐藏滚动条
    ::-webkit-scrollbar {
        display: none;
    }

    .content {
        width: 100%;
        height: 100%;
        padding: 8px;
        box-sizing: border-box;
        overflow: auto;
        :deep(img) {
            width: 100%;
            height: auto;
        }
    }
}
</style>
